<template>
  <page-header-wrapper>
    <a-spin :spinning="loading">
      <a-card :bordered="false">
        <div class="table-operator" v-if="order.status === 1 && order.is_group === 2">
          <a-form-model layout="inline" :model="formInline" @submit="handlePush" @submit.native.prevent>
            <a-form-model-item>
              <a-input v-model="formInline.express_firm" placeholder="快递公司">
                <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
              </a-input>
            </a-form-model-item>
            <a-form-model-item class="form-item-express-number">
              <a-input v-model="formInline.express_number" placeholder="快递单号,门店自送则写“线下”">
                <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
              </a-input>
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" html-type="submit">发货</a-button>
            </a-form-model-item>
          </a-form-model>
        </div>
        <a-descriptions title="订单信息">
          <a-descriptions-item label="订单编号" :span="3">{{ order.out_trade_no }}</a-descriptions-item>
          <a-descriptions-item label="是否使用优惠券" :span="3">{{
            order.card_discount === 2 ? '是' : '否'
          }}</a-descriptions-item>
          <a-descriptions-item label="联系人">{{
            `${order.serve_name || ''} ${order.serve_mobile || ''}`
          }}</a-descriptions-item>
          <a-descriptions-item label="订单状态" :span="1">
            <a-badge :status="orderStatus(order.status)" :text="order.status | statusFilter"/>
          </a-descriptions-item>
          <a-descriptions-item label="拼团状态" :span="1">
            <a-badge :status="groupStatus(order.is_group)" :text="order.is_group | groupFilter"/>
          </a-descriptions-item>
          <a-descriptions-item label="收货地址" :span="2">{{ order.serve_address }}</a-descriptions-item>
          <a-descriptions-item label="支付方式" :span="3">{{ order.pay_type | payTypeFilter }}</a-descriptions-item>
          <a-descriptions-item label="订单创建时间" :span="3">{{ order.ctime }}</a-descriptions-item>
          <a-descriptions-item label="快递公司" :span="1">{{ order.express_firm }}</a-descriptions-item>
          <a-descriptions-item label="快递单号" :span="2">{{ order.express_number }}</a-descriptions-item>
        </a-descriptions>
        <a-divider style="margin-bottom: 32px" />

        <div class="ant-descriptions-title">商品列表</div>
        <a-table style="margin-bottom: 24px" row-key="id" :columns="columns" :dataSource="cart" :pagination="false">
          <template slot="img_url" slot-scope="text">
            <a-avatar shape="square" :size="64" icon="skin" :src="text" style="width:62px;height:62px" />
          </template>
        </a-table>
      </a-card>
    </a-spin>
  </page-header-wrapper>
</template>

<script>
import { groupBuyOrderDetail, groupBuyOrderSendEdit, groupBuyOrderSend } from '@/api/groupBuy'
import groupStatus from '@/mixins/groupOrderStatus'
import orderStatus from '@/mixins/orderStatus'
import payStatus from '@/mixins/payStatus'

const columns = [
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '价格',
    dataIndex: 'price',
    customRender (text) {
      return '￥' + text
    }
  },
  {
    title: '图片',
    dataIndex: 'img_url',
    scopedSlots: { customRender: 'img_url' }
  },
  {
    title: '数量',
    dataIndex: 'num',
    customRender (text) {
      return text || 1
    }
  }
]

export default {
  mixins: [orderStatus, payStatus, groupStatus],
  data () {
    return {
      cart: [],
      order: {},
      store: {},
      columns,
      loading: false,
      formInline: {
        express_firm: '',
        express_number: ''
      }
    }
  },
  created () {
    this.goodsOrderDetail()
  },
  methods: {
    goodsOrderDetail () {
      const params = this.$route.params
      this.loading = true
      return groupBuyOrderDetail(params).then(res => {
        this.cart = [res.data.info]
        this.order = res.data.order
        this.formInline.express_firm = this.order.express_firm
        this.formInline.express_number = this.order.express_number
        this.loading = false
        return res.data
      })
    },
    handlePush (e) {
      const params = Object.assign({ id: this.order.id }, this.formInline)
      const action = this.order.express_firm ? groupBuyOrderSendEdit : groupBuyOrderSend
      action(params).then(res => {
        this.$message.success('发货成功')
        this.goodsOrderDetail()
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import './common.less';
</style>
